<template>
  <div id="home">
    <el-container>
      <el-aside width="auto">
        <el-menu router :collapse="!flg" :collapse-transition="true" :unique-opened='true' :default-active="$route.path"
          class="el-menu-vertical-demo" background-color="rgb(52,58,64)" text-color="#fff"
          active-text-color="rgb(64, 158, 255)">
          <router-link class="logo" to="/home">{{ flg ? '后台管理系统' : '后台' }}</router-link>

          <div class="title">{{ flg ? '指示板' : '指示' }}</div>
          <el-menu-item index="/welcome">
            <i class="el-icon-menu"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-menu-item index="/send">
            <i class="el-icon-document"></i>
            <span slot="title">编辑文章</span>
          </el-menu-item>

          <div class="title">{{ flg ? '管理模块' : '管理' }}</div>
          <el-menu-item index="/user">
            <i class="el-icon-setting"></i>
            <span slot="title">用户管理</span>
          </el-menu-item>
          <el-menu-item index="/page">
            <i class="el-icon-setting"></i>
            <span slot="title">页面管理</span>
          </el-menu-item>
          <el-menu-item index="/article">
            <i class="el-icon-setting"></i>
            <span slot="title">文章管理</span>
          </el-menu-item>
          <el-menu-item index="/classification">
            <i class="el-icon-setting"></i>
            <span slot="title">分类管理</span>
          </el-menu-item>
          <el-menu-item index="/comment">
            <i class="el-icon-setting"></i>
            <span slot="title">留言评论</span>
          </el-menu-item>
          <el-menu-item index="/nav">
            <i class="el-icon-setting"></i>
            <span slot="title">导航管理</span>
          </el-menu-item>

          <div class="title">{{ flg ? '系统管理' : '系统' }}</div>
          <el-menu-item index="/system">
            <i class="el-icon-menu"></i>
            <span slot="title">系统配置</span>
          </el-menu-item>
          <el-menu-item index="/setpwd">
            <i class="el-icon-document"></i>
            <span slot="title">修改密码</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header class="header">
          <div class="control">
            <i @click="flg = !flg" :class="[flg ? 'el-icon-s-fold' : 'el-icon-s-unfold']"></i>
            <el-breadcrumb v-show="myrouter != '指示板'" separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>{{ myrouter }}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div class="myinfo">
            <el-dropdown trigger="click" @command="down" hide-on-click>
              <span class="el-dropdown-link">
                <img class="myimg" src="@/assets/logo.png" alt="">
                {{ nickname }}
                <!-- 下拉菜单 -->
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu style="width: 120px;" class="dropmenu" slot="dropdown">
                <el-dropdown-item command="setpwd">修改密码</el-dropdown-item>
                <el-dropdown-item command="exit">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { getUserInfo } from '@/api/index'
export default {
  name: 'home',
  data() {
    return {
      //折叠吗
      flg: true,
      myrouter: '',
      nickname:""
    }
  },
  watch: {
    $route: {
      deep: true,
      immediate: true, //是否刚进来初始化就加载
      handler(value) {
        this.myrouter = value.meta.name;
      },
    }
  },
  mounted() {
    getUserInfo({ user_id: 0 }).then(res => {
      this.nickname = res.data.data.nickname
    })
  },
  methods: {
    down(value) {
      if (value === 'setpwd') this.$router.push('/setpwd')
      if (value === 'exit') {
        this.$cache.local.remove('userinfo')
        this.$router.replace('/login')
      }
    }
  }
}
</script>

<style lang="less" src="./index.less" scoped></style>